<template>
  <div>
    <el-dialog v-model="searchEventDialogVisible" title="事件列表" draggable width="960">
      <el-table :data="tableData" border max-height="300" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="id_" label="FID" width="50" />
        <el-table-column prop="事件编号" label="事件编号" width="140" />
        <el-table-column prop="事件类型" label="事件类型" width="85" />
        <el-table-column prop="事件等级" label="事件等级" width="85" />
        <el-table-column prop="发生时间" label="发生时间" width="140" />
        <el-table-column prop="发生地点" label="发生地点" width="85" />
        <el-table-column prop="车牌号" label="车牌号" width="90" />
        <el-table-column prop="驾驶员" label="驾驶员" width="70" />
        <el-table-column prop="处理状态" label="处理状态" width="120" />
      </el-table>
      <!-- 分页显示 -->
      <el-pagination
        background
        small
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchEvent.length"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="searchEventDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useDialog } from '@/stores/dialogSwitch.js'
import { storeToRefs } from 'pinia'
import { useDialogEvents } from '@/stores/dialogEvents.js'
const { searchEvent } = storeToRefs(useDialogEvents())
const { searchEventDialogVisible } = storeToRefs(useDialog())

// 当前页数&&每页显示的数据数目&&offset
const currentPage = ref(1)
const pageSize = ref(5)
const offset = ref(0)
// 筛选符合条件的 事件信息
const tableData = computed(() => {
  offset.value = (currentPage.value - 1) * pageSize.value
  let updateEventData = searchEvent.value.filter((item, index) => {
    return index >= offset.value && index < offset.value + pageSize.value
  })
  return updateEventData
})
</script>

<style scoped>
.el-pagination {
  margin-top: 20px;
}
</style>
